<template>
  <el-row>
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="default">
      <el-form-item label="" prop="customerName">

        <el-input v-model="queryParams.value" placeholder="请输入客户信息" class="input-with-select">
          <template #prepend>
            <el-select v-model="select" placeholder="请选择条件" style="width: 115px">
              <el-option label="客户姓名" value="1" />
              <el-option label="身份证号" value="2" />
              <el-option label="客户房间" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button icon="Search" @click="queryList" />
          </template>
        </el-input>

      </el-form-item>
    </el-form>

    <el-col :span="1.5" class="divider">
      <el-button class="insertButton" type="primary" icon="Plus" size="default"
                 @click="insertEdit">入住登记</el-button>
    </el-col>
  </el-row>

  <!-- 分割线 -->
  <div>
    <el-divider>
      <el-icon>
        <OfficeBuilding />
      </el-icon>
    </el-divider>
  </div>

  <!-- 列表信息 -->
  <el-row v-loading="loading">
    <el-table :data="tableData" size="default">
      <el-table-column prop="indexId" label="序号" type="index" width="60" align="center" />
      <!-- <el-table-column prop="id" label="用户编号" align="center" /> -->
      <el-table-column prop="customerName" label="客户姓名" align="center" />
      <el-table-column prop="customerAge" label="客户年龄" width="65px" align="center" />
      <el-table-column prop="customerSex" label="客户性别" width="65px" align="center">
        <template #default="scope">
          {{ scope.row.customerSex === 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="bloodType" label="血型" width="65px" align="center" />
      <el-table-column prop="height" label="身高(cm)" width="65px" align="center" />
      <el-table-column prop="weight" label="体重(kg)" width="65px" align="center" />
      <el-table-column prop="birthday" label="出生日期" width="100px" align="center" />
      <el-table-column prop="psychosomaticState" label="身体状况 (既往病史)" width="100px" align="center" />
      <el-table-column prop="buildingNo" label="所属楼号" width="65px" align="center" />
      <el-table-column prop="roomNo" label="房间号" width="75px" align="center" />
      <el-table-column prop="bedId" label="床位号" width="75px" align="center" />
      <el-table-column prop="levelId" label="护理级别" width="65px" align="center" />
      <el-table-column prop="idcard" label="身份证号" width="170px" align="center" />
      <el-table-column prop="contactTel" label="联系电话" width="160px" align="center" />
      <el-table-column prop="familyMember" label="家属姓名" align="center" />
      <el-table-column prop="checkinDate" label="入住时间" width="100px" align="center" />
      <el-table-column prop="expirationDate" label="合同到期时间" width="110px" align="center" />
      <el-table-column prop="idcardFront" label="身份证照片" width="110px" align="center">
        <template #default="scope">
          <el-button v-if="scope.row.idcardFront || scope.row.idcardBack" type="primary" size="small"
                     @click="showIdCard(scope.row)">
            查看
          </el-button>
          <span v-else>未上传</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="isDeleted" label="是否展示" width="65px" align="center" /> -->
      <el-table-column fixed="right" label="操作" align="center" min-width="180px">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Edit" round
                     @click="updateEdit(scope.row.customerId)">修改</el-button>
          <el-button type="danger" size="small" icon="Delete" round
                     @click="deleteUser(scope.row.customerId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- v-model 组件里面的数据修改 外面的 queryParams.current 改变，tableData也会改变 -->
    <el-pagination style=" margin-top: 20px;" layout="sizes ,prev, pager, next, jumper, ->, total,"
                   :total="queryParams.total" v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
                   @current-change="queryList" @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
  </el-row>

  <!-- 客户信息对话框 -->
  <el-dialog v-model="showEdit" title="客户信息" style="width: 750px;">
    <EditView v-if="showEdit" :closeEdit="closeEdit" :editId="editId" />
  </el-dialog>

  <!-- 身份证照片查看对话框 -->
  <el-dialog v-model="idCardDialogVisible" title="身份证照片" width="60%">
    <div class="id-card-container">
      <div class="image-wrapper">
        <div v-if="selectedCustomer.idcardFront" class="image-section">
          <div class="image-type">身份证正面</div>
          <el-image :src="getFileUrl(selectedCustomer.idcardFront)"
                    :preview-src-list="[getFileUrl(selectedCustomer.idcardFront)]" fit="contain"
                    class="id-card-image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" hide-on-click-modal />
        </div>
        <div v-else class="no-image">
          <el-empty description="未上传身份证正面照片" :image-size="80" />
        </div>

        <div v-if="selectedCustomer.idcardBack" class="image-section">
          <div class="image-type">身份证反面</div>
          <el-image :src="getFileUrl(selectedCustomer.idcardBack)"
                    :preview-src-list="[getFileUrl(selectedCustomer.idcardBack)]" fit="contain"
                    class="id-card-image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" hide-on-click-modal />
        </div>
        <div v-else class="no-image">
          <el-empty description="未上传身份证反面照片" :image-size="80" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="idCardDialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup name="checkIn">
import { onMounted } from 'vue'
import { ref } from 'vue'
// 导出添加信息组件
import EditView from './edit.vue'
import { listInfo, removeById } from '@/api/customer/checkIn/index'
import { ElMessageBox, ElNotification } from 'element-plus'

import getFileUrl from '@/utils/server_utils'
// 表单查询
const select = ref('')

// 定义数据
// 定义加载状态
const loading = ref(true)
// 表格数据
const tableData = ref([])

// 身份证照片预览相关状态
const idCardDialogVisible = ref(false)

// 查询条件
const queryParams = ref({
  customerName: '',
  idcard: '',
  roomNo: '',
  current: 1,
  size: 10,
  total: 0
})

const map = {
  1: "customerName",
  2: "idcard",
  3: "roomNo"
}

// 查询方法三：在分页的时候使用page 在这基础上 使用await关键字 将返回Promise对象的异步方法变成同步方法
async function queryList() {

  // 根据选择的条件设置 queryParams 中的相应字段
  const key = map[select.value]
  console.log("key",key)
  queryParams.value.customerName = '';
  queryParams.value.idcard = '';
  queryParams.value.roomNo = ''
  if(key){
    queryParams.value[key]    =  queryParams.value.value;
  }
  // switch (select.value) {
  //     case '1':
  //         queryParams.value.customerName = queryParams.value.value;
  //         queryParams.value.idcard = '';
  //         queryParams.value.roomNo = '';
  //         break;
  //     case '2':
  //         queryParams.value.customerName = '';
  //         queryParams.value.idcard = queryParams.value.value;
  //         queryParams.value.roomNo = '';
  //         break;
  //     case '3':
  //         queryParams.value.customerName = '';
  //         queryParams.value.idcard = '';
  //         queryParams.value.roomNo = queryParams.value.value;
  //         break;
  //     default:
  //         // 如果未选择任何条件，清空所有查询参数
  //         queryParams.value.customerName = '';
  //         queryParams.value.idcard = '';
  //         queryParams.value.roomNo = '';
  //         break;
  // }

  // 开始加载数据时，设置loading状态为true
  loading.value = true
  try {
    // 使用await等待listInfo函数返回结果，确保数据加载完成
    const page = await listInfo(queryParams.value)
    // 将获取到的数据更新到表格数据中
    tableData.value = page.records;
    // 这里过滤一次isDeleted === 0 逻辑显示
    // tableData.value = page.records.filter(item => item.isDeleted === 0);
    // 更新查询参数中的总数据数
    queryParams.value.total = page.total;
    // 加载完成后，设置loading状态为false
    loading.value = false
  } catch (e) {
    // 如果数据加载出现错误，保持loading状态为true
    loading.value = true;
  }

  // 打印日志，用于调试
  // console.log(111);
  // 打印表格数据，用于调试
  // console.log(tableData.value);
}

// 是否展示修改 的表单
const showEdit = ref(false)
// 关闭添加子组件页面 因为组件中需要有cancleEdit方法 所以加入query参数 true时刷新 false时不刷新
const closeEdit = (query) => {
  // 保存后关闭添加子组件页面 并重新查询
  showEdit.value = false;
  if (query) {
    queryList();
  }
}

// 点击修改按钮 将数值传入closeEdit方法 而后获得customerid进行修改
// 待修改的用户editId
const editId = ref(0);
// 新增按钮跳转到子组件 不附带属性
const insertEdit = (id) => {
  // 赋值
  editId.value = 0;
  showEdit.value = true;
}

// 修改按钮跳转到子组件 并附带customerid属性
const updateEdit = (id) => {
  // 赋值
  editId.value = id;
  showEdit.value = true;

  // console.log("editId");
  // console.log(editId.value);
}

// 删除按钮 调用删除方法
const deleteUser = (id) => {
  ElMessageBox.confirm(
      '是否确认删除该用户信息?',
      'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        removeById(id).then(_success => {
          ElNotification({
            title: '消息',
            type: 'success',
            message: "删除成功",
          })
          queryList();
        })
      })
}

// 身份证照片预览
let selectedCustomer = ref({});
// 身份证照片预览方法
const showIdCard = (row) => {
  selectedCustomer.value = row
  idCardDialogVisible.value = true
  return;
}

// 加载当前页面完成之后查询
onMounted(() => {
  queryList()
})

</script>

<style scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.insertButton {
  margin: 0px 0px 10px 0px;
}

.divider {
  margin: 0px 0px 10px 0px;
}

/* 新增身份证照片查看样式 */
.id-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 20px;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  width: 100%;
}

.image-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 300px;
  max-width: 400px;
}

.image-type {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}

.id-card-image {
  width: 100%;
  max-height: 250px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.id-card-image:hover {
  transform: scale(1.02);
}

.no-image {
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-wrapper {
    flex-direction: column;
  }

  .image-section {
    min-width: 100%;
  }

  .id-card-image {
    max-height: 200px;
  }
}
</style>
